<template>
	<view class="image-detail">
		<u-navbar :is-back="true" :border-bottom="false" back-icon-color="#fff" :background="{ background: '#000' }">
			<view class="slot-wrap">
				<view class="nav_center single-omit">
					<text>新闻资讯</text>
				</view>
			</view>
			<view class="navbar-right" slot="right">
				<!-- 	<u-icon name="share" size="30" color="#333333"></u-icon> -->
				<text class="iconfont iconfenxiang1"></text>

			</view>
		</u-navbar>
		<news-swiper v-if="newsData.type==1 && imgList.length>0" :list="imgList" @change="(i)=>{index = i}">

		</news-swiper>
		<news-video v-if="newsData.type==2" @change="(i)=>{index = i}" :list="videoList"></news-video>
		<view class="content">
			<view class="tit">
				{{newsData.newsName}}
			</view>
			<text v-if="textList && textList.length>0">
				{{textList[index]}}
			</text>
		</view>
		<news-bottom :item="newsData"></news-bottom>
	</view>
</template>

<script>
	import NewsSwiper from "./components/NewsSwiper.vue"
	import NewsVideo from "./components/NewsVideo.vue"
	import NewsBottom from "./components/NewsBottom.vue"
	export default {
		components: {
			NewsSwiper,
			NewsBottom,
			NewsVideo
		},
		data() {
			let userCode = this.$store.state.user.store_user_code;
			return {
				queryObj: {
					newsCode: "",
					userCode
				},
				newsData: {},
				imgList: [],
				videoList: [],
				textList: [],
				index: 0
			};
		},
		onLoad(option) {
			this.queryObj.newsCode = option.newsCode;
		},
		onShow() {
			this.queryObj.userCode = this.$store.state.user.store_user_code;
			this.loadData();
		},
		methods: {
			async loadData() {
				const result = await this.$api.getNewsByCode(this.queryObj);
				if (result.resultCode === '200' && result.data.data) {
					this.newsData = result.data.data;
					if (this.newsData.content) {
						this.textList = this.newsData.content.match(/[^ /]\>[^ \<]+\</g).map(item => item.replace(/(.{1}\>)|\</g, ""));;
						if (this.newsData.type == 1) {
							let list = this.newsData.content.match(/src="[^ "]+"/g).map(item => item.slice(0, item.length - 1).replace(
								/src="/, ""));
							list = list.map(item => {
								let obj = {
									image: item,
									title: ''
								}
								return obj;
							});
							this.imgList = list;
							console.log('this.imgList', this.imgList);
						} else if (this.newsData.type == 2) {
							let list = this.newsData.content.match(/src="[^ "]+"/g).map(item => item.slice(0, item.length - 1).replace(
								/src="/, ""));;
							this.videoList = list;
						}
					}

				}
			},

			parseToDOM(str) {
				var div = document.createElement("div");
				if (typeof str == "string")
					div.innerHTML = str;
				return div;
			},

			handlePDom(dom) {
				let ps = dom.querySelectorAll('p');
				let list = [];
				for (let i = 0; i < ps.length; i++) {
					list.push(ps[i].innerText);
				}
				return list;
			},

			handleImgDom(dom) {
				let imgs = dom.querySelectorAll('img');
				let list = [];
				for (let i = 0; i < imgs.length; i++) {
					list.push(imgs[i].src);
				}
				return list;
			},

			handleIframe(dom) {
				let imgs = dom.querySelectorAll('iframe');
				let list = [];
				for (let i = 0; i < imgs.length; i++) {
					list.push(imgs[i].src);
				}
				return list;
			}
		}
	}
</script>

<style lang="scss">
	@import "@/commom/styles/icons.css";

	page {
		background: #000000;
	}

	.image-detail {
		/deep/.u-slot-content {
			display: flex;
			justify-content: center;

			.slot-wrap {
				max-width: 600rpx;
				font-size: 32rpx;
				font-weight: 400;
				line-height: 88rpx;
				color: #333333;
			}
		}

		.navbar-right {
			font-size: 30rpx;
			margin-right: 24rpx;
			color: #333333;
		}

		.nav_center {
			color: #fff;
		}

		.iconfenxiang1 {
			color: #fff;
		}

		.content {
			padding: 20rpx;
			padding-top: 0rpx;
			padding-bottom: 170rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;

			.tit {
				width: 100%;
				display: flex;
				margin-bottom: 20rpx;
				flex-wrap: wrap;
				justify-content: flex-start;
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
			}
		}
	}
</style>
